import { View, Image, Text } from "@tarojs/components"
import IconBack from '@/assets/images/icon-back.png'
import { forwardRef } from "react";
import Taro from "@tarojs/taro";

import './commonFullBar.scss'
import useInitAction from "@/hooks/useInitAction";
interface ICommonFullBar {
    title: string
}
const CommonFullBar: React.FC<ICommonFullBar> = forwardRef(({ title }, ref) => {
    const { placeHolderHeight, barTop } = useInitAction();


    const handleGoBack = () => {
        Taro.navigateBack();
    }

    return <>
        {placeHolderHeight > 0 && <View className='w-full relative h-424px  box-border common-bar' >
            <View className="box-border w-full flex items-center justify-center" style={{ height: placeHolderHeight + 'px', paddingTop: barTop + 'px' }}>
                <Image src={IconBack} className=" w-48px h-48px absolute left-34px" onClick={handleGoBack}></Image>
                <Text className="text-#161618 font-bold text-36px text-center">{title}</Text>
            </View>


        </View>}

    </>
})
export default CommonFullBar;